<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/css/recycle_bin.css" rel="stylesheet">
    <title>回收站</title>
</head>
<body>
    <div class="container">
        <header>
            <h1 class="title">回收站</h1>
        </header>
        <main>
            <section class="deleted-students-table">
                <table>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>语文</th>
                            <th>数学</th>
                            <th>英语</th>
                            <th colspan="2">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{range $index, $value := .deleted_students}}
                        <tr>
                            <td>{{inc $index}}</td>
                            <td>{{$value.Id}}</td>
                            <td>{{$value.Name}}</td>
                            <td>{{$value.Chinese}}</td>
                            <td>{{$value.Math}}</td>
                            <td>{{$value.English}}</td>
                            <td>
                                <button class="restore-button" data-id="{{$value.Id}}">恢复</button>
                            </td>
                            <td>
                                <button class="permanent-delete-button" data-id="{{$value.Id}}">永久删除</button>
                            </td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>
                <div class="actions">
                    <a href="/index">返回首页</a>
                </div>
            </section>
        </main>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 绑定恢复按钮的事件
            document.querySelectorAll('.restore-button').forEach(button => {
                button.addEventListener('click', function() {
                    var studentId = button.getAttribute('data-id');
                    // 发送恢复请求
                    fetch('/recycle_bin/restore/' + studentId, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                    })
                    .then(response => {
                        if (response.ok) {
                            alert('学生已恢复！');
                            // 重定向到首页
                            window.location.href = '/recycle_bin';
                        } else {
                            alert('恢复失败，请重试！');
                        }
                    })
                    .catch(error => {
                        console.error('请求过程中出现问题:', error);
                        alert('恢复失败，请重试！');
                    });
                });
            });

            // 绑定永久删除按钮的事件
            document.querySelectorAll('.permanent-delete-button').forEach(button => {
                button.addEventListener('click', function() {
                    var studentId = button.getAttribute('data-id');
                    if (confirm('确认永久删除该学生吗？此操作不可恢复！')) {
                        // 发送永久删除请求
                        fetch('/recycle_bin/delete/' + studentId, {
                            method: 'DELETE',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                        })
                        .then(response => {
                            if (response.ok) {
                                alert('学生已永久删除！');
                                // 刷新页面或移除该行
                                location.reload();
                            } else {
                                alert('删除失败，请重试！');
                            }
                        })
                        .catch(error => {
                            console.error('请求过程中出现问题:', error);
                            alert('删除失败，请重试！');
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>
